Vuetify is a popular UI framework for Vue apps.
In this article, we’ll look at how to work with the Vuetify framework.
Badges
The v-badge component lets us add an avatar-like icon or text onto the component to highlight information to the user.
They appear as superscripts or subscripts.
For example, we can write:
<template>
<v-container>
<v-row class="text-center">
<v-col col="12">
<v-toolbar>
<v-tabs dark background-color="primary" grow>
<v-tab>
<v-badge color="pink" dot>One</v-badge>
</v-tab>
<v-tab>
<v-badge color="green" content="6">Two</v-badge>
</v-tab>
<v-tab>
<v-badge color="deep-purple accent-4" icon="mdi-vuetify">Three</v-badge>
</v-tab>
</v-tabs>
</v-toolbar>
</v-col>
</v-row>
</v-container>
</template>
<script>
export default {
name: "HelloWorld",
data: () => ({
alert: false,
}),
};
</script>
We add badges to tab links with the v-tab component.
The color can be changed with the color prop.
icon lets us change the icon.
Show Badge on Hover
We can make a badge shows on hover with the v-hover component.
For example, we can write:
<template>
<v-container>
<v-row class="text-center">
<v-col col="12">
<v-badge
:value="hover"
color="deep-purple accent-4"
content="1000"
left
transition="slide-x-transition"
>
<v-hover v-model="hover">
<v-icon color="grey lighten-1" large>mdi-account-circle</v-icon>
</v-hover>
</v-badge>
</v-col>
</v-row>
</v-container>
</template>
<script>
export default {
name: "HelloWorld",
data: () => ({
hover: undefined,
}),
};
</script>
to add a badge that shows on hover.
The hover state is controlled by the hover state.
v-model son the v-hover component sets the hover state.
Dynamic Notifications
We can create dynamic notifications with badges.
The content can be controlled with the content prop.
For example, we can write:
<template>
<v-container>
<v-row class="text-center">
<v-col col="12">
<div>
<v-btn class="mx-1" color="primary" @click="messages++">Send Message</v-btn>
<v-btn class="mx-1" color="error" @click="messages = 0">Clear Notifications</v-btn>
</div>
<v-badge :content="messages" :value="messages" color="green" overlap>
<v-icon large>mdi-email</v-icon>
</v-badge>
</v-col>
</v-row>
</v-container>
</template>
<script>
export default {
name: "HelloWorld",
data: () => ({
messages: 0,
}),
};
</script>
We have the Send Message button that increments the message state.
This causes the content to update with the latest message value.
Banners
The v-banner component is used as a message for users with 1 to 2 actions.
It can have a single line or multiple lines.
For example, we can write:
<template>
<v-container>
<v-row class="text-center">
<v-col col="12">
<v-banner single-line :sticky="sticky">
Hello world.
<template v-slot:actions>
<v-btn text color="deep-purple accent-4">Get Online</v-btn>
</template>
</v-banner>
</v-col>
</v-row>
</v-container>
</template>
<script>
export default {
name: "HelloWorld",
data: () => ({
sticky: true
}),
};
</script>
We have the v-banner component with the single-line prop to display a single line banner.
The sticky controls whether the banner is sticky or not.
Two-Line Banner
We can add a 2 line banner to store more data.
For example, we can write:
<template>
<v-container>
<v-row class="text-center">
<v-col col="12">
<v-banner>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent cursus nec sem id malesuada.
Curabitur lacinia sem et turpis euismod, eget elementum ex pretium.
<template
v-slot:actions
>
<v-btn text color="primary">Dismiss</v-btn>
<v-btn text color="primary">Retry</v-btn>
</template>
</v-banner>
</v-col>
</v-row>
</v-container>
</template>
<script>
export default {
name: "HelloWorld",
data: () => ({}),
};
</script>
to add a longer message.
The actions slot has the action buttons.
Conclusion
We can add badges and banners to our app with Vuetify.
